<!DOCTYPE html>
<!--
Copyright 2015 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/tracing/ui/extras/drive/comment_element.html">
<link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html">

<dom-module id='tr-ui-e-drive-comments-side-panel'>
  <template>
    <style>
    :host {
      flex-direction: column;
      display: flex;
      width: 290px;
      overflow-y: scroll;
      overflow-x: hidden;
      background-color: #eee;
    }
    toolbar {
      flex: 0 0 auto;
      border-bottom: 1px solid black;
      display: flex;
    }
    result-area {
      flex: 1 1 auto;
      display: block;
      min-height: 0;
      padding: 4px;
    }
    #comments-textarea-container {
      display: flex;
    }
    #commentinput {
      width: 100%;
    }
    </style>

    <toolbar id='toolbar'></toolbar>
    <result-area id='result_area'>
      <template is="dom-repeat" items="{{comments_}}" repeat="{{ comment in comments_ }}">
        <tr-ui-e-drive-comment-element comment="{{comment}}"
                         on-click="commentClick">
        </tr-ui-e-drive-comment-element>
      </template>
      <div id="comments-textarea-container">
        <textarea id="commentinput" on-focus='textAreaFocus'
            on-blur='textAreaBlur'
            on-keypress="textareaKeypress"></textarea>
      </div>
    </result-area>
  </template>
</dom-module>
<script>
'use strict';

Polymer({
  is: 'tr-ui-e-drive-comments-side-panel',
  behaviors: [tr.ui.behaviors.SidePanel],

  ready() {
    this.rangeOfInterest_ = new tr.b.math.Range();
    this.selection_ = undefined;
    this.comments_ = [];
    this.annotationFromComment_ = undefined;
    this.textAreaFocused = false;
  },

  setCommentProvider(commentProvider) {
    this.commentProvider_ = commentProvider;
  },

  attached() {
    if (this.commentProvider_ === undefined) {
      this.commentProvider_ =
          new tr.ui.e.drive.analysis.DefaultCommentProvider();
    }
    this.commentProvider_.attachToElement(this);
  },

  detached() {
    this.commentProvider_.detachFromElement();
  },

  commentClick(event) {
    const anchor = event.currentTarget.comment.anchor;
    if (!anchor) return;

    const uiState =
        JSON.parse(anchor).a[0][tr.ui.e.drive.constants.ANCHOR_NAME];

    const myEvent = new CustomEvent('navigateToUIState', { detail:
        new tr.ui.b.UIState(new tr.model.Location(uiState.location.xWorld,
            uiState.location.yComponents),
        uiState.scaleX)
    });
    document.dispatchEvent(myEvent);

    if (this.annotationFromComment_) {
      this.model.removeAnnotation(this.annotationFromComment_);
    }
    const loc = new tr.model.Location(uiState.location.xWorld,
        uiState.location.yComponents);

    const text = sender.comment.author.displayName + ': ' +
        sender.comment.content;
    this.annotationFromComment_ =
        new tr.model.CommentBoxAnnotation(loc, text);
    this.model.addAnnotation(this.annotationFromComment_);
  },

  textareaKeypress(event) {
    // Check for return key.
    if (event.keyCode === 13 && !event.ctrlKey) {
      this.commentProvider_.addComment(this.$.commentinput.value);
      this.$.commentinput.value = '';
    }
    event.stopPropagation();
    return true;
  },

  textAreaFocus(event) {
    this.textAreaFocused = true;
  },

  textAreaBlur(event) {
    this.textAreaFocused = false;
  },

  get rangeOfInterest() {
    return this.rangeOfInterest_;
  },

  set rangeOfInterest(rangeOfInterest) {
    this.rangeOfInterest_ = rangeOfInterest;
    this.updateContents_();
  },

  get currentRangeOfInterest() {
    if (this.rangeOfInterest_.isEmpty) {
      return this.model_.bounds;
    }
    return this.rangeOfInterest_;
  },

  get model() {
    return this.model_;
  },

  set model(model) {
    this.model_ = model;
    this.updateContents_();
  },

  set selection(selection) {
    this.selection_ = selection;
  },

  updateContents_() {
    this.commentProvider_.updateComments();
  },

  supportsModel(m) {
    if (m === undefined) {
      return {
        supported: false,
        reason: 'Unknown tracing model'
      };
    }
    return {
      supported: true
    };
  },

  get textLabel() {
    return 'Comments';
  }
});

tr.ui.side_panel.SidePanelRegistry.register(function() {
  return document.createElement('tr-ui-e-drive-comments-side-panel');
});
</script>
